<template>
	<view class="container">

		<view class="bg"></view>
		<view class="main">
			<view class="userinfo">
				<image class="avatar"
					:src="isLogin? userInfo.avatar : 'http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/a1b0aedabc466612a506a75eda513e72.png'"
					mode="aspectFill">
				</image>
				<view class="username">{{userInfo.name}}</view>
				<view class="desc">使用钱包+会员卡+礼品卡支付{{detail.isHave?'':'（您还未开通）'}}</view>
			</view>
			<view class="code-section">
				<view style="margin: 20rpx 0;">此二维码可累计积分(不支持付款)</view>
				<!-- qrcode begin -->
				<image style="width: 350rpx; height: 350rpx;margin: 20rpx;" :src="detail.qrCode"></image>
				<!-- qrcode end -->
				<view class="tips">会员码每30秒自动刷新一次</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		memberCode
	} from '@/api/user.js'

	import {
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				detail: {}
			}
		},
		onLoad() {
			this.makeMemberCode();
			setInterval(() => {
				this.makeMemberCode()
			}, 28000)
		},
		computed: {
			...mapGetters('m_user', ['curretnStore', 'isLogin', 'userInfo'])
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			makeMemberCode(i) {
				memberCode().then(res => {
					this.detail = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.bg {
		background-color: #424141;
		height: 25vh;
		/* #ifdef H5 */
		height: calc(25vh - 44px);
		/* #endif */
	}

	.main {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: 1rpx solid rgba($color: $uni-border-color, $alpha: 0.6);

		.avatar {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			border-radius: 100%;
			margin-top: -70rpx;
			margin-bottom: 20rpx;
		}

		.username {
			font-size: $uni-font-size-lg;
			font-weight: bold;
			margin-bottom: 50rpx;
		}

		.desc {
			font-size: $uni-font-size-sm;
			color: $uni-text-color-assist;
			margin-bottom: 20rpx;
		}
	}

	.code-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $uni-font-size-base;
		color: $uni-font-size-base;

		.tips {
			font-size: $uni-font-size-sm;
			color: $uni-text-color-assist;
		}
	}
</style>
